<template>
	<view class="page">
		<header-bar :isSearchBar="true" @search="toSearch" />

		<view class="" style="position: fixed;top:100upx;width: 100%;padding: 0 20rpx;box-sizing: border-box;z-index: 9999;">
			<v-tabs v-model="currentIndex" scroll="true" activeColor='#FF4D4F' activeFontSize="32rpx" bold="true"
				lineHeight="21px" fontSize="28rpxpx" lineColor="#FFFFFF" :tabs="categoryList" field="name"
				@change="changeTab" style="border-width: 1px 0;border-style: solid;"></v-tabs>
		</view>

		<yu-kefu>客服</yu-kefu>

		<view class="typeContainer">

			<view class="" v-if="currentIndex==0">
				<yingyingtang_template_component v-for="(item,index) in templateList" :templateIndex="index"
					:key="index" :item="item" @typeDetailClick="typeDetailClick" style="margin-bottom: 20px;"
					:isShowToolButton="false">
				</yingyingtang_template_component>
				<view class="loading-text">-没有更多了-</view>
					
			</view>

			<view class="" v-else>
				<view class="" v-if="productList.length>0">
					<view 
						style="padding: 10rpx;box-sizing: border-box; display: grid;grid-template-columns: repeat(2, 50%);">
						<productItem @itemClicked="itemClicked" style="padding: 10rpx;" v-for="(item,n) in productList"
							:key="n" :product-id="item.id" :productName="item.name" :orignPrice="item.price"
							:price="item.final_price" :imgSrc="item.images[0].url">
						</productItem>
						
					</view>
					<view class="loading-text">-没有更多了-</view>
					
				</view>
				
				
				<view v-else class="flex-colum-center" style="height: 60vh;">
					<image src="../../static/img/product/noData.png" style="width: 150rpx;height: 150rpx;"></image>
					<text style="color: gray;">无数据.....</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderBar from '../../components/header-bar.vue'
	import yingyingtang_template_component from "../../components/yingyingtang-template-component/yingyingtang-template-component.vue"
	import productItem from '../../components/product-item/product-item.vue'

	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		components: {
			"header-bar": HeaderBar,
			yingyingtang_template_component,
			productItem
			// "card-title": CardTitle,
			// "pageable-product-list": PageableProductList,
			// bwSwiper
		},
		data() {
			return {
				info: {}, //个人信息
				currentIndex: 0,
				categoryList: [{
					id: "",
					name: "推荐"
				}],
				isScroll: false,
				page: 1,
				size: 6,
				categoryId: "",
				nowTagIndex: 0,
				currentSwiper: 0,
				name: "",
				// 轮播图片
				swiperList: [],

				Promotion: [],
				hide: 0,
				//猜你喜欢列表
				loadingText: '正在加载...',
				productList: [
					// {id:"",
					// name:"",
					// price:0,
					// final_price:0,
					// imgSrc:""}

				],
				templateList: [{
						templateType: 1,
						contentList: [{
								productId: "P_Q1aNyROdP13",
								productName: "女装",
								imgSrc: require("@/static/img/product/nvzhuang.jpg")
							},
							{
								productId: "P_Q1aNyROdP13",
								productName: "女装",
								imgSrc: require("@/static/img/product/nvzhuang.jpg")
							},
							{
								productId: "P_Q1aNyROdP13",
								productName: "女装",
								imgSrc: require("@/static/img/product/nvzhuang.jpg")
							},
							{
								productId: "P_Q1aNyROdP13",
								productName: "女装",
								imgSrc: require("@/static/img/product/nvzhuang.jpg")
							}
						]
					},
					{
						templateType: 3,
						contentList: [{
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}]
					},
					{
						templateType: 4,
						contentList: [{
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}, {
							productId: "P_Q1aNyROdP13",
							productName: "女装",
							imgSrc: require("@/static/img/product/nvzhuang.jpg")
						}]
					}
				]
			};
		},
		computed: {
			...mapGetters(['uid'])
		},
		onLoad() {

			var that = this;
			//获取推荐接口
			this.getRecommendedData();


			// 判断是否有token
			var token = uni.getStorageSync('token')
			var uid = uni.getStorageSync('uid')
			var invite_code = uni.getStorageSync('invite_code')


			if (token) {
				console.log('token:' + token)
				console.log("uid:" + uid);

				console.log('inviteCode:' + invite_code)
				if (!invite_code) {
					if (uid) {
						uni.showModal({
							title: "识别码",
							placeholderText: "请输入识别码",
							editable: true,
							success: (e) => {
								console.log("e:" + e.content)
								// 同步识别码
								that.syncInviteCode(e.content, uid)
							},
							fail: () => {

							}
						});
					}
				}
				this.getCategory();
			}
		},
		onShow() {
			// this.current = 0;
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			// this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			// this.headerTop = e.scrollTop >= 0 ? null : 0;
			// this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			
			if(this.currentIndex==0){
				
				this.getRecommendedData();
			}else{
				this.init();
				this.getProductList();
			}
			
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			// this.$refs.pageableProductList.loadProducts()
			this.getProductList();
		},
		methods: {
			init() {

				this.page = 1;
				this.size = 6;
				this.productList = [];
			},

			getRecommendedData() {
				var that = this;
				this.$pin.request('GET', `/shop/template/record`, null,
					successData => {

						if (successData.code == that.$pin.code.success&&successData.data) {
							var result = successData.data.meta;
							console.log(result)
							result.map(res => {
								res.templateTypeName = that.$pin.getTemplateNameById(res.template_type_id)
								res.products.map(pro => {
							
									pro.imgSrc = pro.images[0].url;
								// 	pro.id = pro.id
								})
							})
							that.templateList = result;


						}
					},
					failData => {

					})

			},

			syncInviteCode(invite_code, uid) {
				console.log("识别码" + invite_code)
				var that = this;
				var body = {
					invite_code
				}
				this.$pin.request('POST', `/auth/${uid}/invite_code`, body,
					successData => {
						uni.hideLoading()
						if (successData.code == that.$pin.code.success) {
							uni.setStorageSync('invite_code', invite_code)
							uni.showToast({
								icon: 'success',
								title: '邀请码识别成功'
							})

							uni.navigateTo({
								url: "/pages/video/video"
							})

						}
					},
					failData => {
						uni.hideLoading()

					})
			},

			getCategory() {
				let that = this
				this.$pin.request('GET', '/categories', null,
					successData => {
						if (successData.code == that.$pin.code.success) {
							var categoryList = successData.data;
							that.categoryList = that.categoryList.concat(categoryList);
						}
					},
					failData => {
						uni.showToast({
							icon: 'none',
							title: '获取分类信息失败'
						})
					})
			},


			// 搜索按钮
			toSearch(e) {
				var name = e.key;
				uni.navigateTo({
					url: `/pages/product-list/product-list?name=${name}&title=${name}`
				})
			},

			changeTab(index) {

				this.currentIndex = index;

				console.log('当前选中的项：' + index)
				var obj = this.categoryList[index];
				var id = obj.id;
				this.categoryId = id;
				this.init();
				this.getProductList();
				// var title = obj.name;


				// if (index != 0) {
				// 	uni.navigateTo({
				// 		url: `/pages/product-list/product-list?title=${title}&id=${id}`
				// 	})
				// } else {
				// 	this.getRecommendedData();
				// }
			},
			getProductList() {
				uni.showLoading({
					title: "加载中..."
				})
				var param = {
					categories_id: this.categoryId ? this.categoryId : "",
					page: this.page,
					size: this.size,
					name: this.name ? this.name : ""
				}
				let that = this
				this.$pin.request('GET', '/products', param,
					successData => {
						uni.stopPullDownRefresh();
						uni.hideLoading()
						if (successData.code == that.$pin.code.success) {
							var records = successData.data.records;

							if (records.length > 0) {


								that.productList = that.productList.concat(records);
								this.page++;
							} else {
								uni.showToast({
									title: '没有更多数据',
									icon: 'none'
								})
							}

						}
					},
					failData => {
						uni.showToast({
							icon: 'none',
							title: '获取分类信息失败'
						})
						uni.hideLoading()

					})


			},

			itemClicked(e) {
				console.log(e)
				uni.navigateTo({
					url: "/pages/product-detail/product-detail?productId=" + e
				})
			},
			typeDetailClick(e) {
				console.log({
					...e
				})

				var token = uni.getStorageSync('token')
				if (token) {
					uni.navigateTo({
						url: "/pages/product-detail/product-detail?productId=" + e.id
					})
				}

			}
		}
	};
</script>
<style lang="scss">
	.page {
		width: 100vw;
		// padding: 0 20rpx;
		// box-sizing: border-box;
		position: relative;

		.typeContainer {
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 88vh;
			margin-top: 86rpx;
		}

	}

	.v-tabs.data-v-fa47ca0a {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		border-width: 1px 0;
		border-style: solid;
		border-color: #E5E7EB;
	}

	.bottom_line {
		border-bottom: 10rpx solid #FBD00B;
	}

	.bar-container {
		width: 100%;
		height: 140upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 40rpx;

		.bar-item {

			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			font-size: 26upx;
			color: #2E2E2E;
		}
	}

	.swiper {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;


		// .swiper-box {
		// 	width: 92%;
		// 	height: 30.7vw;
		// 	margin-top: 20upx;
		// 	background-color: #FFFFFF;
		// 	display: flex;
		// 	justify-content: space-evenly;
		// }
	}

	.full-widthone {
		width: 120upx;
		height: 120upx;
		background-size: 120upx 120upx;
		background-repeat: no-repeat;
		background-color: transparent;
		/*按钮透明*/
		position: absolute;
		top: 770upx;
		right: 40upx;
	}

	button[plain] {
		border: 0
	}

	.category-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.category {
			width: 20%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;


		}
	}

	.imgcategory {
		width: 100%;
		display: flex;
		justify-content: center;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}


	.textcategory {
		margin-top: 16upx;
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 24upx;
		color: #3c3c3c;
	}

	.banner {
		width: 92%;
		margin: 40upx 4%;

		image {
			width: 100%;
			height: 20vw;
			border-radius: $pin-border-radius;
			box-shadow: $pin-shadow;
		}
	}

	.promotion {
		width: 92%;
		margin: 0 4%;

		.text {
			width: 100%;
			height: 60upx;
			font-size: 34upx;
			font-weight: 600;
			margin-top: -10upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.column {
				width: 43%;
				padding: 15upx 3%;
				background-color: #ffffff;
				border-radius: $pin-border-radius;
				box-shadow: $pin-shadow;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 40upx;
					display: flex;
					align-items: center;
					margin-bottom: 5upx;

					.title {
						font-size: 30upx;
					}

					.countdown {
						margin-left: 20upx;
						display: flex;
						height: 40upx;
						display: flex;
						align-items: center;
						font-size: 20upx;

						view {
							height: 30upx;
							background-color: $pin-color-primary;
							display: flex;
							justify-content: center;
							align-items: center;
							color: $pin-color-foreground;
							border-radius: $pin-border-radius;
							margin: 0 4upx;
							padding: 0 5upx;
						}
					}
				}

				.left {
					width: 50%;
					height: 18.86vw;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.ad {
						margin-top: 5upx;
						width: 100%;
						font-size: 22upx;
						color: $pin-color-light-foreground;
					}

					.into {
						width: 100%;
						font-size: 24upx;
						color: $pin-color-light-foreground;
						margin-bottom: 5upx;
					}
				}

				.right {
					width: 18.86vw;
					height: 18.86vw;

					image {
						width: 18.86vw;
						height: 18.86vw;
					}
				}
			}
		}
	}
</style>